<template>
  <div class="iphone-x">
    <div class="time">{{ currentTime }}</div>
    <div class="header">
      <div class="sensors"/>
    </div>
    <div class="content" :style="style">
      <slot/>
    </div>
    <div class="stripe"/>
    <div class="btn"/>
    <div class="power"/>
  </div>
</template>
<script setup>
defineProps({
  style: {
    type: Object,
    default: () => ({})
  }
})
const currentTime = ref('')
let timer = null

// 更新时间的函数
const updateTime = () => {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  currentTime.value = `${ hours }:${ minutes }`
}

// 组件挂载时启动定时器
onMounted(() => {
  updateTime() // 立即执行一次
  timer = setInterval(updateTime, 1000) // 每秒更新一次
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped lang="scss">
$iphone_x_height: 770px;
$iphone_x_width: calc($iphone_x_height / 2.0292397);
$iphone_x_header_height: calc($iphone_x_height / 28.91666666);
$iphone_x_header_width: calc($iphone_x_width / 2.0853658);
.iphone-x {
  background: #222;
  border-radius: 45px;
  box-shadow: inset 0 0 0 2px #606467, inset 0 0 0 6px #e2e3e4;
  height: $iphone_x_height;
  padding: 15px;
  width: $iphone_x_width;
  margin: 10px;
  position: relative;

  .time {
    position: absolute;
    z-index: 999;
    top: calc(15px + $iphone_x_header_height / 4);
    left: calc($iphone_x_width / 10);
  }

  .header {
    background: #222;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    height: $iphone_x_header_height;
    left: 25.5%;
    position: absolute;
    top: 15px;
    width: $iphone_x_header_width;
    z-index: 199;

    .sensors::after,
    .sensors::before {
      content: "";
      position: absolute;
    }

    .sensors::after {
      background: #444;
      border-radius: 2.5px;
      height: 5px;
      left: 50%;
      transform: translateX(-15%);
      margin-left: -20px;
      top: 4px;
      width: 40px;
    }

    .sensors::before {
      background: #444;
      border-radius: 50%;
      height: 11px;
      left: 50%;
      margin-left: 30px;
      top: 1px;
      width: 11px;
    }

    &::after,
    &::before {
      content: "";
      height: 6px;
      position: absolute;
      top: 0;
      width: 6px;
    }

    &::after {
      background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #222 75%, #222 100%);
      left: -6px;
    }

    &::before {
      background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #222 75%, #222 100%);
      right: -6px;
    }
  }

  .power {
    background: #606467;
    height: 80px;
    position: absolute;
    right: -2px;
    top: 150px;
    width: 3px;
  }

  .btn {
    background: #606467;
    height: 26px;
    left: -2px;
    position: absolute;
    top: 92px;
    width: 3px;


    &::after,
    &::before {
      background: #606467;
      content: "";
      height: 50px;
      left: 0;
      position: absolute;
      width: 3px;
    }

    &::after {
      top: 48px;
    }

    &::before {
      top: 112px;
    }
  }

  .stripe {
    &::after,
    &::before {
      border: solid rgba(51, 51, 51, .25);
      border-width: 0 6px;
      content: "";
      height: 5px;
      left: 0;
      position: absolute;
      width: 100%;
      z-index: 9;
    }

    &::after {
      top: 68px;
      width: $iphone_x_width;
    }

    &::before {
      bottom: 68px;
      width: $iphone_x_width;
    }
  }

}


.content {
  background-color: #fff;
  background-position: center center;
  background-size: cover;
  border-radius: 32px;
  padding-top: 24px;
  height: calc($iphone_x_height - 30px);
  width: calc($iphone_x_width - 30px);
  overflow: auto;
}

</style>
